<template>
    <div class="content">
        <div id="chartV" class="chart-container"></div>
        <div id="chartTwoV" class="chart-container"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        data() {
            return {
                chart1: null,
                chart2: null,
                valueData: [10, 20, 30, 40, 50],
                percentData: ['10%', '20%', '30%', '40%', '50%']
            };
        },
        mounted() {
            this.initChart('chartV', this.valueData, this.percentData);
            this.initChart('chartTwoV', [20, 30, 40, 50, 60], ['20%', '30%', '40%', '50%', '60%']);
        },
        methods: {
            initChart(id, valueData, percentData) {
                const dom = document.getElementById(id);
                const myChart = echarts.init(dom);

                const option = {
                    color: ['#4473FF', '#FFA01B', '#41D380'],
                    xAxis: {
                        type: 'category',
                        data: ['A', 'B', 'C', 'D', 'E']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: valueData.map((value, index) => ({
                            value,
                            percent: percentData[index]
                        })),
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                            // formatter: '{c} ({d}%)'
                            formatter: function (params) {
                                console.log('label params=', params)
                                //本质上：数据来源于上面的series.data属性
                                return `${params.name}: ${params.data.value} (${params.data.percent})`;
                            }
                            //注意：在label.formatter中，我们使用了{c}来代表值，{d}%来代表百分比。
                            //然而，由于ECharts的默认formatter不支持直接访问data对象中的自定义属性（如percent），
                            //上述代码仅为示例，实际中需要通过params.data.value和params.seriesData[index].percent来访问值和百分比。
                            //但在ECharts的较新版本中，params.data可能直接包含自定义属性，具体取决于ECharts版本和配置。
                        },
                        tooltip: {
                            formatter: function (params) {
                                console.log('tooltip params=', params)
                                return `${params.name}: ${params.value} (${params.data.percent})`;
                            }
                        }
                    }]
                };

                myChart.setOption(option);
            }
        }
    };
</script>

<style>
    .chart-container {
        width: 400px;
        height: 400px;
        margin: 20px;
    }
</style>